<template>
  <div ref="circlePieChartsRef" :class="className" :style="{ height: height, width: width }"></div>
</template>

<script setup>
import * as echarts from "echarts";

const props = defineProps({
  circleTitle: {
    type: String,
    default: "",
  },
  dataArray: {
    type: Array,
    default: () => [],
  },
  className: {
    type: String,
    default: "circlePieChart",
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "300px",
  },
  centerBgColor: {
    type: String,
    default: "#fff",
  },
  centerColor: {
    type: String,
    default: "#000",
  },
  isShowTip: {
    type: Boolean,
    default: true,
  },
})

const circleChartTitle = props.circleTitle;
const className = props.className;
const width = props.width;
const height = props.height;
const centerBgColorValue = props.centerBgColor;
const centerColorValue = props.centerColor;
const isShowTipValue = props.isShowTip;

const circlePieChartsRef = ref(null);
let myChart = null;

let loopPieTimer = null;
let ind = 0;

onMounted(() => {
  myChart = echarts.init(circlePieChartsRef.value, "macarons");
  drawChart(props.dataArray, circleChartTitle);
  loopPieTimer = setInterval(() => {
    myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: ind });
    ind = (ind + 1) % props.dataArray.length;
    myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: ind });
  }, 3000); // 每3秒更新一次数据

  // 移入环形图，环形图片段位移向外偏离
  myChart.on("mouseover", (params)=> {
    clearInterval(loopPieTimer)
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: ind
    })
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: params.dataIndex
    })
    ind = params.dataIndex
  });

  // 移出环形图，环形图片段位移向内恢复
  myChart.on("mouseout", (params)=> {
    ind = params.dataIndex
    if (loopPieTimer) {
      clearInterval(loopPieTimer)
    }
    loopPieTimer = setInterval(() => {
      myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: ind });
      ind = (ind + 1) % props.dataArray.length;
      myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: ind });
    }, 3000)
  });

});

onUnmounted(() => {
  clearInterval(loopPieTimer);
  myChart && myChart.dispose();
});

watch(
  () => props.dataArray,
  (newValue) => {
    drawChart(newValue, circleChartTitle)
  },
)

function drawChart(dataArr, chartTitle) {
  myChart.setOption({
    tooltip: {
      trigger: 'item',
      position: 'right',
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [
      {
        name: chartTitle,
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          formatter: "{b}\n{d}%",
          fontSize: 14,
          color: centerColorValue,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        color: ["#5083f8", "#ffdb75", "#c5e573","#ca8622", "#006100", "#6b24b2", "#b2b200", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666"],
        data: dataArr
      }
    ]
  });
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}

</script>
